<script setup>
  import {ref,reactive} from 'vue'
  import {
  flyToByGeom,OverLayer,clearHighlights,
  clearHighlights2,IncreaseWater,IncreaseWater2,IncreaseWater1,
  clearHighlights1,
  cleanBubbleSk,
  cleanBubbleGw,
  cleanBubbleSc
} from '../../tools/highlight-feature'
import { dataSource } from '../../components/List/advancedAllList'
import {water_source_data} from '../../components/List/water_source'
import {dataFactoryFn} from '../../http/http'
import {formatDate} from '../../tools/timeDate' 
import bus from '../../tools/eventBus'
  // 设施配置
  const titleValue=reactive([
    {name:'水厂',value:true,img:'/icon/Sc@3x.png'},
    {name:'水库',value:false,img:'/icon/Sk@3x.png'},
    {name:'管网',value:false,img:'/icon/Lljcd@3x.png'},
  ])
  // 水库弹窗展示实时数据
  const SkRealTime=[]
  // 获取当前文件地址
  const pathName = window.document.location.pathname;
  const pathUrl = pathName.substring(0, pathName.lastIndexOf('/'));
  // 开关事件
  function changeSwitch(value,item){
   bus.emit('TypeSwitch',{item:item})
   switch(item.name){
    case '水厂':
      if(value){
        OverLayer(arrayList.value,item)
        IncreaseWater(arrayList.value)
      }else{
        clearHighlights()
        cleanBubbleSc()
      }
    break;
    case '水库':
      if(value){
        OverLayer(dataPoints2.value,item,SkRealTime.value)
        IncreaseWater2(dataPoints2.value)
        }else{
          clearHighlights2()
          cleanBubbleSk()
        }
    break;
    case '管网':
      if(value){
        OverLayer(dataPoints1.value,item)
        IncreaseWater1(dataPoints1.value)
        }else{
          clearHighlights1()
          cleanBubbleGw()
        }
    break;
   }
  }

  function dataFactoryValue(){
    const today=new Date()
    const yesterday=new Date(today)
    yesterday.setDate(today.getDate()-1)
    return {
    datasetId:'30d15a8a-c551-c286-57bc-320c6dad36c5',
    dataTime_start:formatDate(yesterday),
    dataTime_end: formatDate(today)
  }
  }

  // 查询-起止时间水库信息数据接口（到昨日）
  function dataFactory(){
  const formDataValue = new URLSearchParams(dataFactoryValue()).toString();
 
    dataFactoryFn(formDataValue).then((res)=>{
    const data=res.data
    if(data.code=='200') SkRealTime.value=data.data
    })
  }

  dataFactory()

  // 数据源
  const arrayList =ref([]);
  const dataPoints1 =ref([]);
  const dataPoints2 = ref([]);
  async function IncreaseData() {
  // 水厂数据
  arrayList.value = await dataSource({
    currPage: 1,
    geom: null,
    pageSize: 20,
    conditions: {
      waterworks: null
    }
  });
  // 管网数据
  dataPoints1.value = await dataSource({
    geom: null,
    conditions: {
      waterparticle: null,
      pressuretap: null,
      flowmeasure: null
    }
  });
  dataPoints1.value=dataPoints1.value.filter(item => item.archiveid !== null && item.archiveid !== '');
  // 水库数据
  dataPoints2.value=await dataSource({
  "geom": null,
  "conditions": {
    "source": null
  }
  });
  // 初始化默认展示水厂点位/弹窗
  OverLayer(arrayList.value,{name:'水厂'})
  IncreaseWater(arrayList.value)
}
IncreaseData()
</script>


<template>
  <div class="legend">
    <div class="legend_title">设施</div>
    <div v-for="(item,index) in titleValue" :key="index">
      <img class="legend_img" :src="pathUrl+item.img" />
      <el-switch @change="(value) => changeSwitch(value, item)" v-model="item.value" :inactive-text="item.name" size="small" />
    </div>
  </div>
</template>



<style lang="scss" scoped>
.legend{
  width: 156px;
  background-image: linear-gradient(137deg, rgba(253, 254, 255, 0.96) 21%, rgba(247, 250, 254, 0.86) 100%);
  box-shadow: 0px 2px 8px 0px rgba(10, 35, 59, 0.1);
  border-radius: 12px;
  padding: 16px;
  .legend_title{
    margin-bottom: 10px;
  }
  .legend_img{
    width: 20px;
    margin-right: 10px;
  }
}
::v-deep.el-switch--small .el-switch__label{
  margin-right:37px
}
</style>